import React, {Component} from "react";
// StackNavigator用于实现各个页面间的跳转。TabNavigator切换组件，实现同一页面上不同界面的切换。
import {
      createStackNavigator,
      createAppContainer
    } from 'react-navigation';
import {
    AppRegistry,
    StyleSheet,
    Text,
    Button,
    Image,
    View,
    TouchableOpacity
} from 'react-native';

import App1 from "./App";  // 从HomeScreen页面导入HomeScreen组件，HomeScreen其实是表示HomeScreen.js。./表示当前页面，不可删除
import BlinkApp from "./App2"; // 从NewsScreen页面导入NewsScreen组件
import MainPage from "./MainPage"; // 从MyScreen页面导入MyScreen组件
import Page3 from "./page3";
import Page1 from "./page1";
import HomePage from "./HomePage";
import AppTab from "./tabNav";
import MaterialTopTabNavigator from "./toptab"

const RootStack = createStackNavigator({

    HomePage: {
        screen: HomePage
    },

    Page1: {
        screen: Page1,
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}`,//动态设置navigationOptions
        })
    },

    Home: {
//        screen:MainPage,
        screen: AppTab,  // todo 嵌套Tab 这样就行
//                navigationOptions: {//在这里定义每个页面的导航属性，静态配置
//                    title: "This is Page1.",
//                }
        navigationOptions: ({navigation}) => ({
            title: `${navigation.state.params.name}`//动态设置navigationOptions

        })
    },
    Details: {
        screen: BlinkApp,
                navigationOptions: {//在这里定义每个页面的导航属性，静态配置
                    title: "This is Page2.",
                }
    },
    toptab: {
        screen: MaterialTopTabNavigator,
                navigationOptions: {//在这里定义每个页面的导航属性，静态配置
                    title: "This is toptab.",
                }
    },

    Page3: {
        screen: Page3,
        navigationOptions: (props) => {//在这里定义每个页面的导航属性，动态配置,todo props 是传送过来的参数
            const {navigation} = props;
            const {state, setParams} = navigation;
            const {params} = state;
            // 这里只能配置子页面 上的 标题栏
            return {
                title: params.title ? params.title : 'This is Page3',
                headerRight: (
                    <Button
                        title={params.mode === 'edit' ? '保存' : '编辑'}
                        onPress={() =>
                            props.navigation.setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
                    />
                ),
            }
        }
    },
}, {
    defaultNavigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});


const App = createAppContainer(RootStack);

export default App;
